<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入vue2.0版本 -->
    <script src="../js/vue.js"></script>
    <title>Document</title>
</head>



<body>
    <div id="root">
        我是Vm下的name值 {{name}}
    </div>
    <script>
        Vue.config.productionTip = false; //以阻止vue在启动时生成生产提示
        /*
            我们控制台打印Vm可以直接看到属性里边address和name而且鼠标放上去有"Invoke property getter"，所以肯定是通过Object.defineProperty()添加上去的
            因为address和name我们是在data中配置的，不可能直接会显示在Vm下，所以是Vue通过一一列操作，为了用户好开发添加到Vm下边。
            以上都是我们猜想，那我们去验证下
            name————————通过getter获取————————data下的name（验证Vm读出来的name是不是data下的name）
            name————————通过setter修改————————data下的name

            修改data下的name，看看Vm下的name是否变化验证getter
            修改Vm下的那么，看看data下的那么是否发生变化验证setter

            1.Vm._data就是我们原本的data???

            我们验证
            option.data==Vm._data   为true

            2.验证猜想
            我们控制台，修改Vm下的name就可以看到Vm._data.name下的变化
            我们修改Vm._data.name下的变化，就可以看到Vm下的name

            
            也就是我们修改Vm下的属性————可通过setter修改Vue实例下的data————data只要一变化Vue就会监测到，然后页面中就会发生变化
 

        **/
        let option = {
            el: "#root",
            data: {
                address: "回龙观",
                name: "名师"
            }
        }
        const Vm = new Vue(option)
    </script>

</body>

</html>